<script setup lang='ts'>
import { cloneDeep } from 'lodash-es'

const emit = defineEmits(['clearSearch', 'chooseProject', 'clearBuilding', 'clearBuildingInfo', 'toAreaStr'])
const state = defineModel<any>('state', { required: true, default: {} })
const areaList = defineModel<any>('areaList', { required: true, default: [] })
const streetList = defineModel<any>('streetList', { required: true, default: [] })
const communityList = defineModel<any>('communityList', { required: true, default: [] })
const projectList = defineModel<any>('projectList', { required: true, default: [] })

const options = ref<any>([])
const isShowArea = ref<boolean>(false)
const isShowStreet = ref<boolean>(false)
const isShowCommunity = ref<boolean>(false)
const isShowProject = ref<boolean>(false)
const isShowBottom = computed(() => {
    return isShowArea.value || isShowStreet.value || isShowCommunity.value || isShowProject.value
})

const isStreetDisabeld = computed(() => {
    return !state.value.areaCode
})
const isCommunityDisabeld = computed(() => {
    return isStreetDisabeld.value || !state.value.streetCode
})
const isProjectDisabeld = computed(() => {
    return isCommunityDisabeld.value || !state.value.communityId
})

const initialState = {
    areaCode: '',
    areaName: '',
    streetCode: '',
    streetName: '',
    communityId: '',
    communityName: '',
    projectId: '',
    projectName: '',
    level: '1', // 统计级别,1:区;2.街道;3.社区;4.小区
}

watchEffect(() => {
    if (isShowArea.value) {
        options.value = cloneDeep(areaList.value)
    }
    if (isShowStreet.value) {
        options.value = cloneDeep(streetList.value)
    }
    if (isShowCommunity.value) {
        options.value = cloneDeep(communityList.value)
    }
    if (isShowProject.value) {
        options.value = cloneDeep(projectList.value)
    }
})

// 点击级联
function clickItem(type) {
    // console.log('clickItem', isShowArea.value, isShowStreet.value, isShowCommunity.value, isShowProject.value)
    if (type === 1) {
        isShowArea.value = !isShowArea.value
        isShowStreet.value = false
        isShowCommunity.value = false
        isShowProject.value = false
    }
    else if (type === 2) {
        isShowStreet.value = !isShowStreet.value
        isShowArea.value = false
        isShowCommunity.value = false
        isShowProject.value = false
    }
    else if (type === 3) {
        isShowCommunity.value = !isShowCommunity.value
        isShowArea.value = false
        isShowStreet.value = false
        isShowProject.value = false
    }
    else if (type === 4) {
        isShowProject.value = !isShowProject.value
        isShowArea.value = false
        isShowStreet.value = false
        isShowCommunity.value = false
    }
}

// 选择一项
function chooseOne(item) {
    // console.log('choose', item)
    if (isShowArea.value) {
        state.value.areaName = item.name
        state.value.areaCode = item.code
        clearStreet()
        clear()
        state.value.level = '2'
        emit('toAreaStr', item.name) // 传递区name，展示区边界
    }
    else if (isShowStreet.value) {
        state.value.streetName = item.name
        state.value.streetCode = item.code
        clearCommunity()
        clear()
        state.value.level = '3'
    }
    else if (isShowCommunity.value) {
        state.value.communityName = item.name
        state.value.communityId = item.code
        clearProject()
        clear()
        state.value.level = '4'
    }
    else if (isShowProject.value) {
        state.value.projectName = item.name
        state.value.projectId = item.code
        clear()
        state.value.level = '5'
        emit('clearBuildingInfo') // 关闭左侧楼栋信息弹框
        emit('chooseProject', item.code) // 查楼栋数据用的单独的接口
    }
}

// 清空筛选
function clearAll() {
    if (!state.value.areaCode)
        return
    state.value = cloneDeep(initialState)
    clear()
    emit('clearSearch')
}

function clear() {
    isShowArea.value = false
    isShowStreet.value = false
    isShowCommunity.value = false
    isShowProject.value = false
}

// 清空街道
function clearStreet() {
    state.value.streetCode = ''
    state.value.streetName = ''
    clearCommunity()
}

// 清空社区
function clearCommunity() {
    state.value.communityId = ''
    state.value.communityName = ''
    clearProject()
}

// 清空小区
function clearProject() {
    state.value.projectId = ''
    state.value.projectName = ''
    emit('clearBuilding') // 关闭楼栋列表显示
    emit('clearBuildingInfo') // 关闭左侧楼栋信息弹框
}
</script>

<template>
    <div class="container">
        <div v-show="isShowBottom"
             class="mask"
             @click="clear"
        />

        <div class="search">
            <div class="top">
                <div class="item"
                     :class="[state.areaName ? 'red' : '']"
                     @click="clickItem(1)"
                >
                    <span class="name">{{ state.areaName || '区域' }}</span>

                    <el-icon :class="isShowArea ? 'rotate1' : 'rotate2'">
                        <ArrowDown />
                    </el-icon>
                </div>

                <div class="item"
                     :class="[state.streetName ? 'red' : '', isStreetDisabeld ? 'disabled' : '']"
                     @click="clickItem(2)"
                >
                    <span class="name">{{ state.streetName || '街道' }}</span>

                    <el-icon :class="isShowStreet ? 'rotate1' : 'rotate2'">
                        <ArrowDown />
                    </el-icon>
                </div>

                <div class="item"
                     :class="[state.communityName ? 'red' : '', isCommunityDisabeld ? 'disabled' : '']"
                     @click="clickItem(3)"
                >
                    <span class="name">{{ state.communityName || '社区' }}</span>

                    <el-icon :class="isShowCommunity ? 'rotate1' : 'rotate2'">
                        <ArrowDown />
                    </el-icon>
                </div>

                <div class="item"
                     :class="[state.projectName ? 'red' : '', isProjectDisabeld ? 'disabled' : '']"
                     @click="clickItem(4)"
                >
                    <span class="name">{{ state.projectName || '小区' }}</span>

                    <el-icon :class="isShowProject ? 'rotate1' : 'rotate2'">
                        <ArrowDown />
                    </el-icon>
                </div>

                <div class="clear"
                     @click="clearAll"
                >
                    <el-icon>
                        <Delete />
                    </el-icon>

                    <span>清空筛选</span>
                </div>
            </div>

            <div v-show="isShowBottom"
                 class="bottom"
            >
                <div v-for="(item, index) in options"
                     :key="index"
                     class="item2"
                     :class="[(state.areaName === item.name || state.streetName === item.name || state.communityName === item.name || state.projectName === item.name) ? 'red' : '']"
                     @click="chooseOne(item)"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    .mask {
        position: absolute;
        width: 110%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        left: 0;
        top: 0;
        z-index: 998;
    }

    .search {
        width: 50vw;
        height: 56px;
        line-height: 56px;
        background: #ffffff;
        position: absolute;
        top: 24px;
        left: 24px;
        z-index: 999;
        user-select: none;

        .top {
            display: flex;

            .item {
                // width: 160px;
                flex: 3;
                padding: 0 24px;
                border-right: 1px solid #eee;
                display: flex;
                white-space: nowrap;
                overflow: hidden;

                :deep(.el-icon) {
                    margin: 22px 0 0 2px;
                }

                &:hover {
                    color: red;
                    cursor: pointer;
                }

                .name {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .rotate1 {
                    transform: rotate(180deg);
                    transition: all 0.4s;
                }
                .rotate2 {
                    transform: rotate(0);
                    transition: all 0.4s;
                }
            }

            .clear {
                flex: 2;
                color: #aaa;
                min-width: 90px;
                white-space: nowrap;
                overflow: hidden;
                display: flex;
                justify-content: center;

                &:hover {
                    color: #010101;
                    cursor: pointer;
                }

                :deep(.el-icon) {
                    margin: 20px 2px 0 0;
                }
            }
        }

        .bottom {
            width: 100%;
            min-height: 100px;
            border-top: 1px solid #eee;
            position: absolute;
            background: #ffffff;
            top: 56px;
            left: 0;
            display: flex;
            flex-wrap: wrap;
            padding: 20px;

            .item2 {
                height: 30px;
                line-height: 30px;
                margin-right: 24px;

                &:hover {
                    color: red;
                    cursor: pointer;
                }
            }
        }

        .disabled {
            pointer-events: none;
            cursor: default;
            color: #999999;
        }

        .red {
            color: red;
        }
    }
}
</style>
